<template>
  <div class="demo-conbogrid">
    <ClientOnly>
      <v-combogrid
        v-model="state.value"
        v-model:inputlabel="state.label"
        :fields="['id', 'name']"
        :data="state.tableData"
        width="400"
        height="300"
        :columns="[
          { prop: 'name', label: 'Name' },
          { prop: 'id', label: 'value' },
        ]"
      >
        <template #search>
          <!-- 自定义内容 -->
          <el-input v-model="state.input" style="width: 150px" />
        </template>
      </v-combogrid>
    </ClientOnly>
  </div>
</template>

<script setup>
  import { reactive } from 'vue'
  const state = reactive({
    value: '',
    label: '',
    input: '',
    tableData: new Array(30).fill(30).map((it, index) => {
      return { id: `id ${index}`, name: `name ${index}` }
    }),
  })
</script>

<style lang="scss" scoped>
  .demo-conbogrid {
    :deep(.el-input) {
      width: 350px;
    }
  }
</style>
